<template>
	<div class="setting">
		<div class="flex-c" style="width: 100%;height: 37px; background-color: #FFFFFF;  ">
			<div class="" style="margin-right: 81px;">
				<div class="" @click="select(0)" :class="activeselect==0 ? 'activeclass' : 'noactiveclass'"
					style="padding-bottom: 10px;font-weight: bold;font-size: 13px;font-family: auto">
					设备状态
				</div>
				<div class="" style="border-radius: 1px;width: 52px;height: 2px;margin: auto;"
					:style="activeselect==0 ? 'background: #0580FF;' : ''">
				</div>
			</div>
			<div class="">
				<div class="" style="padding-bottom: 10px;font-weight: bold;font-size: 13px;font-family: auto"
					@click="select(1)" :class="activeselect==1 ? 'activeclass' : 'noactiveclass'">
					工单管理
				</div>
				<div class="" style="border-radius: 1px;width: 52px;height: 2px;margin: auto;"
					:style="activeselect==1 ? 'background: #0580FF;' : ''">
				</div>
			</div>
		</div>
		<div class="" style="margin:0px  15px" v-if="activeselect==0">
			<div class="bg-f" style="padding: 15px 16px 15px 15px;margin: 15px 0px;">
				<form @submit="tabtoplist">
					<!-- search 事件在点击键盘上的搜索/回车按钮后触发，cancel 事件在点击搜索框右侧取消按钮时触发（自己改为了搜索）。 -->
					<van-search style="color: #0580FF;" v-model="text" show-action placeholder="请输入设备名称"
						@search="tabtoplist">
						<template #action>
							<div @click="tabtoplist">搜索</div>
						</template>

					</van-search>
				</form>
				<div class="flex-space bg-f tab">
					<div class="" v-for="(item,index) in tablist" :key="index" v-model="active"
						@click="Friends0(0,index)" :class="active==index ? 'activeselect' : 'activeno'" style="font-size: 15px;font-weight: bold;
						font-family: auto;margin-right: 10px;line-height: 37px;">
						{{item.name}}
					</div>
				</div>
			</div>
			<!-- 内容区域 -->
			<div class="" :style="`margin-bottom: 59px;width: 100%;height:${height-248.47}px; overflow-y: scroll;`">
				<van-pull-refresh v-model="isLoading" @refresh="onRefresh(pullitem,0)">
					<van-list>
						<div class="" v-if="TerminalStatuslist">
							<div class="" v-for="(item,index) in TerminalStatuslist" :key="index">
								<div class="bg-f" style="padding: 15px 15px 19px;margin-top: 15px;">
									<div class="flex-space" style="margin-bottom: 15px;">
										<div class="flex flex-align">
											<div class="" style="width: 25px;height: 25px;margin-right: 10px;">
												<img :src="item.imgUrl">
											</div>
											<div class=""
												style="margin-right: 6px;color: #000000;font-weight: bold;font-size: 16px;font-family:auto">
												{{item.terminalId}}
											</div>
											<div class="" style="width: 20px;height: 16px;">
												<img :src="item.netWorkImgUrl">
											</div>
										</div>
										<div class="flex-align" style=" height: 22px;padding: 6px; background: linear-gradient(-37deg, #3497FD, #0580FF);
												box-shadow: 0px 2px 5px 0px rgba(5, 128, 255, 0.52);
												border-radius: 11px;">
											<div class="flex-align" style="width: 6px;height: 12px;margin-right: 4px;">
												<img src="../../assets/newsetting/binding@2x.png">
											</div>
											<div class="" @click="BindingOperations(item)"
												style="color: #FFFFFF;font-weight: bold;font-size: 11px;font-family:auto">
												绑定运维
											</div>
										</div>
									</div>
									<!-- 分割线 -->
									<div class="flex-space" style="width: 100%;height: 1px;background: #F6F7FB;"></div>
									<div class="flex-space" style="padding:15px 0px ;">
										<div class=""
											style="font-weight: 500;font-size: 14px;font-family: auto;color: #666666;">
											设备昵称:
										</div>
										<div class=""
											style="font-weight: bold;font-size: 14px;font-family: auto;color: #000000;">
											{{item.terminalName}}
										</div>
									</div>
									<div class="flex-space" style="width: 100%;height: 1px;background: #F6F7FB;"></div>
									<div class="flex-space" style="padding:15px 0px ;">
										<div class=""
											style="font-weight: 500;font-size: 14px;font-family: auto;color: #666666;">
											文档打印机状态:
										</div>
										<div class="" :style="item.printState==3?'color: #15C78B;':'color: #FA3131;'"
											style="font-weight: bold;font-size: 14px;font-family: auto;color: #FA3131;">
											{{item.netStateText}}
										</div>
									</div>
									<div class="flex-space" style="width: 100%;height: 1px;background: #F6F7FB;"></div>
									<div class="flex-space" style="padding:15px 0px ;">
										<div class=""
											style="font-weight: 500;font-size: 14px;font-family: auto;color: #666666;">
											报错时间:
										</div>
										<div class=""
											style="font-weight: bold;font-size: 14px;font-family: auto;color: #FA3131;"
											ref="errortime">
											{{item.errorTime}}
										</div>
									</div>
									<div class="flex-space" style="width: 100%;height: 1px;background: #F6F7FB;"></div>
									<div class="flex-space" style="padding:15px 0px ;">
										<div class=""
											style="font-weight: 500;font-size: 14px;font-family: auto;color: #666666;">
											故障时长:
										</div>
										<div class=""
											style="font-weight: bold;font-size: 14px;font-family: auto;color: #FA3131;"
											ref="spans">
											{{computetime(index)}}
										</div>
									</div>
									<div class="flex-space" style="width: 100%;height: 1px;background: #F6F7FB;"></div>
									<div class="flex-space flex-align" style="padding: 19px 0px 0px;">
										<div class="flex-align">
											<!-- 折叠收起 -->
											<div class="flex-align" style="width: 13px;height: 13px;margin-right:6px;"
												@click="hcout">
												<img src="../../assets/newsetting/drop-down@2x.png" v-if="hcoutboole">
												<img src="../../assets/newsetting/drop-down2@2x.png" v-else>
											</div>
											<div class="" style="font-weight: 500;font-size: 13px;font-family: auto;color: #0580FF; 
										 ">
												耗材余量
											</div>
										</div>
										<div class="flex-space">
											<!-- @click="updataselect(item,item3.id)"v-for="(item3,index3) in update" :key="index3" -->
											<div class="" style="padding:  4px 7px 5px 7px ;background: #EBF7FF;border-radius: 5px;font-weight: 500;font-size: 12px;
										font-family: auto;color: #0580FF;margin-right: 10px;" v-for="(item3,index3) in update" :key="index3"
												@click="updataselect(item,item3.id)">
												{{item3.name}}
											</div>
										</div>
									</div>

								</div>

								<!-- 折叠区域 -->
								<div class="bg-f flex-space" style="margin-top: 5px;padding: 15px;"
									v-if="hcoutboole&&item.stocksList">
									<div class="" v-for="(item2,index2) in item.stocksList" :key="index2">

										<div class="">
											<div class="flex-align"
												style="font-weight: bold;width: 50px;color: #0580FF;font-size: 18px;font-family:auto;margin-bottom: 7px; "
												:style="`color:${item2.color}`">
												{{item2.totalQty}}
											</div>
											<div class=""
												style="font-weight: 500;color: #666666;font-size: 12px;font-family:auto;">
												{{item2.goodsName}}余量
											</div>
										</div>

									</div>
								</div>
							</div>
						</div>
						<div class="flex-c" style="width: 100%;text-align: center;"
							v-if="TerminalStatuslist.length==0&&TerminalStatusbolen">
							<img src="../../assets/noList/nolist.png" style=" width: 50%;">
						</div>
						<!-- v-if="vanloading" -->
						<van-loading color="#1989fa" style="text-align: center;" v-if="vanloading" />
					</van-list>
				</van-pull-refresh>
			</div>

		</div>

		<div id="" v-if="activeselect==1">
			<div class="bg-f" style="padding: 15px 16px 15px 15px;margin: 15px 15px;">
				<div class="flex-space bg-f tab">
					<div class="" v-for="(item,index) in gdList" :key="index" v-model="active1"
						@click="Friends1(index,1)" :class="active1==index ? 'activeselect' : 'activeno'" style="font-size: 15px;font-weight: bold;
		 			font-family: auto;margin-right: 10px;line-height: 37px;">
						{{item.name}}
					</div>
				</div>
			</div>
			<div class="" :style="`margin:15px 0px 59px 15px;  height:${height-239.61}px; overflow-y: scroll;`">
				<van-pull-refresh v-model="isLoading" @refresh="onRefresh(item,1)">
					<!-- ewf -->
					<van-list v-model="loading" :finished="finished" :offset="10" finished-text="没有更多了"
						@load="onLoad(1)" :immediate-check="false">
						<!-- <div class="" v-if="succerror" style="width: 100%;text-align: center">
							<img src="../../assets/noList/nolist.png" style=" width: 50%;">
						</div> -->
						<!-- v-if="GetCountbolen" -->
						<div class="GetCountbolen flex-wrap flex-space " v-if="GetCountbolen">
							<div class="bg-f " style="width: 44%;" @click="selectboss(1)">
								<div class="flex-c" style="margin: 15px 0px 30px;">
									<img style="width: 44px; height: 44px;" src="../../assets/newsetting1/outtime1.png">
								</div>
								<div class="">
									<div class="flex-c"
										style="margin-bottom: 10px;font-family: auto;font-weight: bold;font-size: 22px;color: #000000;">
										{{GetCountList.timeoutsCount}}
									</div>
									<div class="flex-c"
										style="margin-bottom: 15px;font-family: auto;font-size: 13px;font-weight: 500;color: #BBBBBB;">
										已超时
									</div>
								</div>
							</div>
							<div class="bg-f " style="width: 44%;" @click="selectboss(2)">
								<div class="flex-c" style="margin: 15px 0px 30px;">
									<img style="width: 44px; height: 44px;" src="../../assets/newsetting1/noshoul.png">
								</div>
								<div class="">
									<div class="flex-c"
										style="margin-bottom: 10px;font-family: auto;font-weight: bold;font-size: 22px;color: #000000;">
										{{GetCountList.notAccepted}}

									</div>
									<div class="flex-c"
										style="margin-bottom: 15px;font-family: auto;font-weight: 500;font-size: 13px;color: #BBBBBB;">
										未受理
									</div>
								</div>
							</div>

							<div class="bg-f " style="width: 44%;" @click="selectboss(3)">
								<div class="flex-c" style="margin: 15px 0px 30px;">
									<img style="width: 44px; height: 44px;" src="../../assets/newsetting1/yessouli.png">
								</div>
								<div class="">
									<div class="flex-c"
										style="margin-bottom: 10px;font-family: auto;font-weight: bold;font-size: 22px;color: #000000;">
										{{GetCountList.accepted}}
									</div>
									<div class="flex-c"
										style="margin-bottom: 15px;font-family: auto;font-weight: 500;font-size: 13px;color: #BBBBBB;">
										已受理
									</div>
								</div>
							</div>
							<div class="bg-f " style="width: 44%;" @click="selectboss(4)">
								<div class="flex-c" style="margin: 15px 0px 30px;">
									<img style="width: 44px; height: 44px;" src="../../assets/newsetting1/yes.png">
								</div>
								<div class="">
									<div class="flex-c"
										style="margin-bottom: 10px;font-size: 22px;font-family: auto;font-size: 22px;font-weight: bold;color: #000000;">
										{{GetCountList.completed}}
									</div>
									<div class="flex-c"
										style="margin-bottom: 15px;font-size: 13px;font-family: auto;font-weight: 500;font-size: 13px;color: #BBBBBB;">
										已完成
									</div>
								</div>
							</div>
						</div>
					</van-list>
				</van-pull-refresh>
			</div>

		</div>
	</div>
</template>
<script>
	
	import {
		Dialog,
		Toast,
		Loading
	} from 'vant';
	import {
		getCurrTime
	} from '@/utils/time.js'
	import {
		timezjs
	} from '@/utils/timezjs.js'
	import {
		TerminalStatus
	} from '@/api/setting/TerminalStatus.js'
	// 工单
	import {
		GetListByPage
	} from '@/api/setting/GetListByPage.js'
	import {
		GetCount
	} from '@/api/setting/GetCount.js'
	// 受理
	import {
		Accept
	} from '@/api/setting/Accept.js'
	// 忽略
	import {
		Ignore
	} from '@/api/setting/Ignore.js'
	// 完成
	import {
		Complete
	} from '@/api/setting/Complete.js'
	var aaa = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
	export default {
		name: 'setting',
		data() {
			return {
				pullitem: '', //设备状态刷新
				hcoutboole: true,
				itemserror: '', //计时器报错设备
				succerror: false,
				// once: false, //加载一次
				vanloading: false,
				TerminalStatusbolen: false, //控制暂无数据的显示
				TerminaBoolen: false,
				GetListBoolen: false,
				datacount: '',
				list: [],
				workId: '', //受理的参数
				showyes: false,
				wanyes: false,
				popup: false, //弹窗
				text: '', //搜索框
				active: 0, //顶部导航栏
				active1: 0, //顶部导航栏
				activeselect: 0, //工单设备切换
				isLoading: false, //下拉刷新
				loading: false, //上拉加载
				finished: false,
				GetListByPageList: [],
				timeList: [], //处理时时的故障时间
				GetCountList: {},
				GetCountbolen: false,
				GetListByPagegdbolen: false,
				// tablist: ["全部", "离线", "卡纸", "缺纸", "缺墨", "脱机"],
				tablist: [{
					name: '全部',
					value: ''
				}, {
					name: '离线',
					value: '0'
				}, {
					name: '卡纸',
					value: '7'
				}, {
					name: '缺纸',
					value: '9'
				}, {
					name: '缺墨',
					value: '8'
				}],
				gdList: [{
					name: '全部',
					value: ''
				}, {
					name: '已超时',
					value: '-1'
				}, {
					name: '未受理',
					value: '1'
				}, {
					name: '已受理',
					value: '2'
				}, {
					name: '已完成',
					value: '4'
				}],
				list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				height: 100, //默认高度
				TerminalStatuslist: [],
				printState: '', //查询全部 离线 卡纸的数据参数
				// update: ['修改费率', '模板上传', '修改地址', '年费充值'],
				update: [{
						name: '修改费率',
						id: '1',
						color: '#05A6ED'
					},
					// {
					// 	name: '模板上传',
					// 	id: '2'
					// }, 
					{
						name: '修改地址',
						id: '3',
						color: '#FEC963'
					},
					{
						name: '年费充值',
						id: '4'
					},
				],
				pagesindex: 1, //默认的页数
			}
		},

		created() {
			this.pullitem = this.tablist[0];
			if (this.$route.query.setting) {
				this.active = window.localStorage.getItem('settingactive') * 1;
				this.activeselect = window.localStorage.getItem('settingactiveselect');
				if (this.activeselect == 0) {
					// this.vanloading = true;
					this.tabtoplist(this.active); //设备状态的第n个
				} else {
					// 工单管理的第1个
					if (this.active == 0) {
						this.GetCount(); //获取工单的数据
					} else {
						this.Friends1(this.active, this.activeselect) //numtab切换  id是工单还是设备
					}
				}
			} else {
				// this.keeplive=false; 
				this.tabtoplist(0);
			}
			// 设备状态的第一个
			// this.Terminal(); //获取数据设备状态 
		},
		methods: {GetListByPage
			// 控制耗材余量的折叠展开
			hcout() {
				this.hcoutboole = !this.hcoutboole;
			},
			// 取消
			quxfalse() {
				this.popup = false;
				Toast.fail('取消操作');
			},
			// 受理
			yesdds() {
				Accept({
					postdata: this.workId
				}).then(res => {
					this.popup = false;
					
					Toast.success('受理成功');
					this.GetListByPagegd();

				})
			},
			// 完成
			wanc() {
				Complete({
					postdata: this.workId
				}).then(res => {
					this.popup = false;
				
					Toast.success('操作完成');
					this.GetListByPagegd();
				})
			},
			// 忽略
			hulyyds() {
				Ignore({
					postdata: this.workId
				}).then(res => {
					this.popup = false;
				
					Toast.success('忽略成功');
					this.GetListByPagegd();
				})

			},
			// 受理弹窗
			shol(value) {
				this.showyes = true;
				this.wanyes = false;
				this.popup = true;
				this.workId = value.workId;
				
			},
			shol3(value) {
				this.showyes = false;
				this.wanyes = true;
				this.popup = true;
				this.workId = value.workId;
			
			},
			// 跳转到详情页面
			gddetail(item) {
				this.$router.push({
					path: '/gddetails',
					query: {
						workId: item.workId
					}
				})
			},
			selectboss(index) {
				this.Friends1(index, 1);
				this.active = index;
			},
			// 搜索框内容
			tabtoplist() {
				// this.active = num;
				this.vanloading = true;
				this.TerminalStatuslist = [];
			
				TerminalStatus({
					"pageindex": 1, //0
					"pagesize": 10, //10 每页的数量
					"postdata": [{
							"field": "printState",
							"value": this.tablist[this.active].value
						},
						{
							"field": "terminalName",
							"value": this.text
						}
					]
				}).then(res => {
					this.text = '';
				
					this.TerminalStatuslist = res.data;
					this.isLoading = false;
					this.vanloading = false;
				})
			},
			BindingOperations(item) {
				this.$router.push({
					path: '/bindoperations',
					query: {
						TerminalId: item.terminalId
					}
				})
			},
			//修改费率
			updataselect(item, id) {
				// console.log(item, id, 'item')
				switch (id) {
					// 修改费率
					case '1':
						this.$router.push({
							path: '/modifyRate',
							query: {
								terminalId: item.terminalId
							}
						})
						break;
						// case '2':
						// 	this.$router.push({
						// 		path: '/modifyRate',
						// 		query: {
						// 			terminalId: item.terminalId
						// 		}
						// 	})
						// 	break;
						// 修改地址
					case '3':
						this.$router.push({
							path: '/address',
							query: {
								terminalId: item.terminalId
							}
						})
						break;
				}
			},

			// 1.界面第一次create创建时候调用一次参数printState为''查询设备状态全部的数据
			Terminal() {
				this.vanloading = true;
				TerminalStatus({
					"pageindex": this.pagesindex,
					"pagesize": 10, //每一页查询的数量
					"postdata": [{
						"field": "printState",
						"value": this.printState
					}]
				}).then(res => {
					
					if (res.data) {
						this.TerminalStatusbolen = false;
						this.vanloading = false;
						this.TerminalStatuslist = [];
						// this.TerminalStatuslist.push(...res.data); 
						this.TerminalStatuslist = res.data;
					} else {
						this.vanloading = false;
						this.TerminalStatusbolen = true;
					}
				})
			},
			client() {
				this.$nextTick(() => {
					this.height = document.body.clientHeight;
					// console.log(this.height, '位置')
				});
			},
			// 设备工单切换
			select(index) {
				
				this.finished = false
				this.active = 0; //切换的时候把双向绑定置为0
				this.activeselect = index;
				window.localStorage.setItem('settingactiveselect', index)
				if (index == 0) {
					this.printState = '';
					// this.TerminalStatuslist = [];
					this.Terminal(); //获取数据  
				}
				if (index == 1) {
				
					this.GetCountList = {};
					this.GetCount(); //获取工单的数据
					this.GetCountbolen = true;
					this.GetListByPagegdbolen = false;
				}
			},
			// 顶部切换
			// num=active切换第几个顶部切换  id=0设备状态  id=1工单管理
			Friends0(id, index) {
				this.active = index;
				this.pullitem = this.tablist[index];
				
				if (id == 0) { //设备状态  
					this.TerminalStatusbolen = false,
						window.localStorage.setItem('settingactive', this.active)
					this.printState = this.tablist[this.active].value; //tablist为顶部切换选项 
					this.TerminalStatuslist = [];
					this.Terminal();
				}

			},
			
			
			
			
			Friends1(num, id) {
			
				this.active1 = num;
				window.localStorage.setItem('settingactive', num)
				// if (this.$route.query.setting) {
				// 	this.pagesindex = window.localStorage.getItem('pagesindex');
				// } else {
				this.pagesindex = 1; //顶部切换时候页数重置为第1页；
				// }
				if (id == 1) { //工单管理
					// this.finished = false
					if (num == 0) { //工单管理的全部数据
						this.GetListByPageList = [];
						this.GetCountList = {};
						this.GetCount(); //获取工单的数据
						this.GetCountbolen = true;
						this.GetListByPagegdbolen = false;
					} else {
						this.GetCountList = {};
						this.GetListByPageList = [];
						this.printState = this.gdList[num].value;
						// this.printState = this.gdList[this.active].value;
						this.GetListByPagegd(); //获取工单的数据
						this.GetCountbolen = false;
						this.GetListByPagegdbolen = true;
					}

				}
			}, 
 

			// 	}
			// },
			// 下拉刷新
			// item切换第几个顶部切换的所以数据  num=0设备状态  num=1工单管理
			onRefresh(item, num) {
				// console.log(num, 'onRefresh')
				if (num == 0) { //
					this.printState = item.value;
					// console.log(item, 'item')
					this.Terminal();
					// console.log('下拉刷新');
					this.isLoading = false;
				}
				if (num == 1) {
					this.GetListByPageList = [];
					if (item.value == '') {
						this.GetCount(); //获取工单的数据
						this.GetCountbolen = true;
						this.GetListByPagegdbolen = false;
						this.isLoading = false;
					} else {
						this.printState = item.value;
						// console.log(item, 'item')
						this.GetListByPagegd();
						// console.log('下拉刷新');
						this.isLoading = false;
					}

				}
			},
			// 1.界面第一次create创建时候调用一次参数printState为''查询工单管理全部的数据
			GetCount() {
				GetCount().then(res => {
					
					if (res.success) {
						this.GetCountList = res.data;
					} else {
						//没有数据或者报错显示图标
						this.succerror = true;
					}
				})
			},


			// computetime(items) {
			// 	setInterval(() => {
			// 		return getCurrTime(items.errorTime); 
			// 	}, 1000)
			// },
			GetListByPagegd() {
				this.loading = true
				return new Promise((resolve, reject) => {
					GetListByPage({
						"pageindex": this.pagesindex,
						"pagesize": 10,
						"postdata": [{
							"field": "queryType",
							"value": this.printState
						}]
					}).then(res => {
						if (res.data != null) { 
							this.GetListByPageList.push(...res.data); 
							this.datacount = res.datacount;
							this.finished = this.datacount < this.GetListByPageList.length
							 
							resolve(res.datacount)
						} else {
							this.succerror = true; //显示没有数据的图片
						}

					}).finally(() => {
						// this.finished = true
						this.loading = false
					})
				})
			},
			//上拉加载		
			onLoad(num) {
				// console.log(num, 'num')
				// 鸡棚暂时不支持上拉加载  设备状态
				if (num == 0) {
					// this.pagesindex += 1; //页数+1；
					// console.log(this.pagesindex, "++1")
					// this.Terminal();
					// this.loading = false; 
					// console.log(this.TerminaBoolen,'boolen')
					// if (this.TerminaBoolen) {
					// 	this.finished = true;
					// }
				}
				if (num == 1) {
					if (this.GetListByPageList.length >= this.datacount) {
						this.finished = true;
					} else {
						this.pagesindex++; //页数+1；
						// console.log(this.pagesindex, "++1")
						this.GetListByPagegd().then(res => {
							
							
							this.loading = false;
							if (this.GetListByPageList.length >= res) {
								this.finished = true;
							}
						});
					}
				}
				// setTimeout(() => {
				// 	for (let i = 0; i < 30; i++) {
				// 		this.list.push(this.list.length + 1);
				// 	} 
				// 	// 加载状态结束
				// 	this.loading = false; 
				// 	// 数据全部加载完成
				// 	if (this.list.length >= 140) {
				// 		this.finished = true;
				// 	}
				// }, 1000)
			},

			// asds(itemserror) {
			// 	return itemserror;
			// 	console.log('计算实现')
			// 	console.log(itemserror, 'itemserror')
			// 	// this.itemserror = itemserror;
			// }
		},
		mounted() {
			this.client() //获取高度   

		},
		computed: {
			cache: false,
			computetime() {
				return (index) => {
					console.log(index, 'index')
					console.log(this.$refs, 'this.$refs')
					setInterval(() => {
						let errorinnerhtml = this.$refs.errortime[index].innerHTML;
						console.log(errorinnerhtml, 'errorinnerhtml')
						if (errorinnerhtml == '') {
							this.$refs.spans[index].innerHTML = '暂无数据'
						} else {
							this.$refs.spans[index].innerHTML = getCurrTime(errorinnerhtml);
						}
					}, 1000)
				}
			},
			// compu() {
			// 	return (index4) => {
			// 		console.log(index4, 'index4')
			// 		console.log(this.$refs, 'refs4')
			// 		if (this.$refs.timesd[index4].text) {
			// 			console.log(this.$refs.timesd[index4].text, 'refs4')
			// 		}
			// 		// let time = this.$refs.timer[index4].innerHTML;
			// 		// this.$refs.timer[index4].innerHTML = timezjs(time)
			// 	}
			// }
		}
	}
</script>
<style>
	/* .setting .updateselect{
		
	} */
	.GetCountbolen div:nth-child(even) {
		margin-right: 4% !important;
	}

	.GetCountbolen div {
		margin-bottom: 15px;
	}

	.bg-f {
		border-radius: 5px;
		background-color: #FFFFFF;
	}

	.setting .activeselect {
		height: 43px;
		color: #FFFFFF;
		width: 55px;
		text-align: center;
		background: url(../../assets/newsetting/bg@2x.png) no-repeat;
		background-size: 100%;
	}

	.setting .activeno {
		color: #000000;
		height: 38px;
		text-align: center;
		width: 55px;
		background: url(../../assets/newsetting/bg2@2x.png) no-repeat;
		background-size: 100%;
	}

	.setting .box-cell .van-cell__value {
		padding: 10px;
	}

	.setting .col-end {
		text-align: end;
	}

	.setting .van-form {
		width: 80%;
		margin: 0px 0px 0px 10px;
	}

	/* .setting .van-field__body input {
		background: #EFEFEF;
		height: 30px;
		padding-left: 10px;
		border-radius: 5px 0px 0px 5px;
	} */

	.setting .ops .van-grid-item__content {
		float: right;
	}

	.setting .ops .van-grid-item__content span {
		color: #2DB6F3;
	}

	.setting .idnum span {
		color: #F59A23;
	}

	.setting .timeout span {
		color: red;
	}

	.setting .noshow span {
		color: #F09D2E;
	}

	.setting .yesshow span {
		color: #169BD5;
	}

	.setting .over span {
		color: #70B603;
	}

	.setting .firitem span {
		width: 100%;
		padding: 1px;
		background-color: #02A7F0;
		text-align: center;
		color: white;
		border-radius: 5px
	}

	.setting .firitemss {
		width: 100%;
		padding: 4px;
		background-color: #02A7F0;
		text-align: center;
		color: white;
		border-radius: 5px;
		font-size: 14px;
		margin: 5px 0px;
	}

	.setting .timer span {
		color: red;
	}

	.setting .custom-title {
		margin-left: 10px;
		vertical-align: middle;
	}

	.setting .search-icon {
		font-size: 16px;
		line-height: inherit;
	}

	.setting .van-tabs__line {
		position: absolute;
		bottom: 0.9375rem;
		left: 0;
		z-index: 1;
		width: 0px;
		height: 0px;
		background-color: #FFFFFF !important;
		border-radius: 0.1875rem;
	}

	.setting .van-tab {
		/* color: #000000 !important; */
		/* font-weight: bold !important; */
		font-family: system-ui !important;
	}

	.setting .van-tab--active {
		color: #02A7F0 !important;
		/* font-weight: bold !important; */
		font-size: 18px !important;
		/* font-weight: bolder !important; */
		font-family: monospace !important;

	}

	.setting .activeclass {
		/* background-color: #02A7F0;
		color: #ffffff */
		color: #000000;
	}

	.setting .noactiveclass {
		color: #BBBBBB;
		/* color: #000000;
		background-color: #D7D7D7; */
	}

	/* 字体 */
	.setting .ftmy {
		font-weight: bold;
		font-size: 12px;
		font-family: system-ui;
	}

	.setting .wrap {
		padding: 24rpx;
	}

	.setting .u-row {
		margin: 40rpx 0;
	}

	.setting .demo-layout {
		height: 80rpx;
		border-radius: 8rpx;
	}

	.setting .bg-purple {
		background: #d3dce6;
	}

	.setting .bg-purple-light {
		background: #e5e9f2;
	}

	.setting .bg-purple-dark {
		background: #99a9bf;
	}

	/* .van-col {
		font-size: 14px;
		font-weight: bold;
	} */
	.setting .van-cell {
		padding: 0 !important;
	}

	/* .cells_lists div:nth-child(3) img{
		margin-left: 26px;
	}
	.cells_lists div:nth-child(4) img{
		margin-left: 26px;
	} */
	.tab div:last-child {
		margin-right: 0px !important;
	}
</style>
